<!--  -->
<template>
  <a-modal
      id='OpenModal'
      :title="title"
      :visible="visible_"
      :confirm-loading="loading"
      @cancel="cancel"
      :width="width"
      dialogClass="open-modal-con"
      :footer="null"
      :maskClosable="false"
      v-bind="otherAttr"
    >
      <!-- <UseUpLoadFile></UseUpLoadFile> -->
      <component
        :is="componentName"
        :closeEvent="closeEvent_"
        :Setloading = "Setloading"
        :upDateTitle="upDateTitle"
        :data="data"
      ></component>
    </a-modal>
</template>

<script>
import componentList from './OpenModalComponent/index'
import config from './utils/OMConfig'
export default {
  // import引入的组件需要注入到对象中才能使用
  name: 'OpenModal',
  components: {...componentList()},
  props: {
    visible: {
      type: Boolean,
      required: true,
      default:false
    },
    closeEvent: {
      type: Function,
    },
    componentName: {
      type: String,
      required: true,
    },
    // 用于传递到组件中的数据
    data: {
      type: [Array,Object],
      required: true,
    },
  },
  data() {
    // 这里存放数据
    return {
      visible_: true,
      loading:false,
      title:'这是标题',
      width:800,
      otherAttr:{
        maskClosable: false
      }
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    visible: {
      handler(val) {
        this.visible_ = val
        // if(val === true){
        //   this.$nextTick().then(()=>{
        //     this.c_()
        //   })
        // }
      },
      deep: true,
      immediate: true
    },
    componentName: {
      handler(val) {
        if (!this.isType.isEmpty(val)) {
          if(this.isType.isNullOrUnDef(config[val])){
            console.warn('需要再配置文件【OMConfig】中添加相关配置');
            return false
          }
          const {title,width,...args} = config[val]
          this.title = title
          this.width = width
          this.otherAttr = {...args}
        }
      },
      deep: true,
      immediate: true
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
  // 方法集合
  methods: {
    c_(){
      const aqpp = document.querySelector('#OpenModal .ant-modal-content')
      let isPointerDown = false
      aqpp.addEventListener('pointerdown', function (e) {
          isPointerDown = true
      });
      aqpp.addEventListener('pointermove', function (e) {
          //捕获
          app.setPointerCapture(e.pointerId)
          if (isPointerDown) {
              const left = aqpp.getBoundingClientRect().left
              const top = aqpp.getBoundingClientRect().top
              let newLeft = e.clientX - left
              let newTop = e.clientY - top
              aqpp.style.left = newLeft + left - aqpp.clientWidth / 2 + 'px'
              aqpp.style.top = newTop + top - aqpp.clientHeight / 2 + 'px'
          }
      });
      aqpp.addEventListener('pointerup', function (e) {
          isPointerDown = false
      });
    },
    cancel(){
      this.visible_ = false
      this.closeEvent(this.visible_)
    },
    closeEvent_(visible=false, data){
      this.visible_ = visible
      this.closeEvent(this.visible_, data)
    },
    Setloading(loading_=false){
      this.loading =loading_
    },
    upDateTitle(title) {
      this.title = title
    },
  },
  }
</script>
<style lang='less'>
.open-modal-con{
  .ant-modal-content{
    .ant-modal-header{
      .ant-modal-title{
        text-align: left;
      }
    }
  }
}
</style>
